<template>
    <div>
        <el-form ref="ruleFormRef" class="form">
            <el-form-item>
                <el-input v-model="model.username" />
            </el-form-item>
            <el-form-item>
                <el-input v-model="model.password" type="password" />
            </el-form-item>
            <el-form-item>
                <el-input v-model.number="model.token_age" type="number">
                    <template #append>{{ model.token_age / 3600 }}小时</template>
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button round type="primary" @click="submitForm">
                    登录
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import config from '@/config';
import router from "@/router";
import { post } from '@/utils/http';
import { onMounted, reactive } from 'vue';


const model = reactive({
    username: '',
    password: '',
    token_age: 720000,
})


onMounted(() => {
    if (localStorage.getItem('local:_token')) {
        router.push({ name: 'webCategory' })
    }
})



const submitForm = async () => {
    if (model.username.length < 2 || model.password.length < 2) {
        return
    }
    let resp = await post(config.config.loginUrl, model)
    let res = resp.data
    if (res.errcode == 0) {
        localStorage.setItem('local:_token', res.data._token)
        localStorage.setItem('_token_expired', res.data._token_expired)
        router.push({ name: 'webCategory' })
    } else {
        alert(res.errMsg)
    }
}

</script>

<style scoped>
.form {
    max-width: 38vw;
    margin: 0 auto;
    margin-top: 35vh;
}
</style>
